
<template>
    按图书类别查询：
    <a-select
        v-model:value="categoryId"
        style="width: 120px"
        :options="category"
        placeholder="不限类型"
    ></a-select>
    <a-button type="primary"  @click="query()" style="margin-left: 10px">
        查询
    </a-button >
    <a-space size="small">
        <router-link to="/addBook">
        <a-button>添加图书信息</a-button>
        </router-link>
    </a-space>

    <a-table :columns="columns"
             :data-source="data" 
             :pagination="pagination"
             @change="handleTableChange"
    >
        <template #indexDraw="{index}">
            {{covering(index+1)}}
        </template>
        <template #bodyCell="{ column, text,record }">
            <template v-if="column.dataIndex === 'categoryName'">
                <a @click="updateBook(record)">{{ text }}</a>
            </template>
        </template>
    </a-table>

</template>


<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue';
import axios from "axios";
import {SelectProps} from "ant-design-vue";
import moment from "moment";
import {useRouter} from "vue-router";
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
//
// const columns = [
//     {
//         title: 'Name',
//         dataIndex: 'name',
//         key: 'name',
//     },
//     {
//         title: 'Age',
//         dataIndex: 'age',
//         key: 'age',
//         width: 80,
//     },
//     {
//         title: 'Address',
//         dataIndex: 'address',
//         key: 'address 1',
//         ellipsis: true,
//     },
//     {
//         title: 'Long Column Long Column Long Column',
//         dataIndex: 'address',
//         key: 'address 2',
//         ellipsis: true,
//     },
//     {
//         title: 'Long Column Long Column',
//         dataIndex: 'address',
//         key: 'address 3',
//         ellipsis: true,
//     },
//     {
//         title: 'Long Column',
//         dataIndex: 'address',
//         key: 'address 4',
//         ellipsis: true,
//     },
// ];
//
// const data = [
//     {
//         key: '1',
//         name: 'John Brown',
//         age: 32,
//         address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
//         tags: ['nice', 'developer'],
//     },
//     {
//         key: '2',
//         name: 'Jim Green',
//         age: 42,
//         address: 'London No. 2 Lake Park, London No. 2 Lake Park',
//         tags: ['loser'],
//     },
//     {
//         key: '3',
//         name: 'Joe Black',
//         age: 32,
//         address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
//         tags: ['cool', 'teacher'],
//     },
// ];
const columns = [
    {
        title: '序号',
        dataIndex: 'indexDraw',
        fixed:'left',
        slots:{customRender:'indexDraw'},
    },
    {
        title: '图书名称',
        dataIndex: 'name'
    },
    {
        title: '出版日期',
        dataIndex: 'publishTime',
        customRender:(text:any,row:any,index:any) =>{
            return moment(text).format("YYYY-MM-DD")
        }
    },
    {
        title: '出版社',
        dataIndex: 'publishName'
    },
    {
        title: '价格',
        dataIndex: 'price'
    },
    {
        title: '图书类别',
        dataIndex: 'categoryName'
    }
];



const category =ref<SelectProps['options']>([]);
const categoryId=ref();
const queryBookCategoryList = () => {
    axios.get("http://localhost:8088/getBookListCategory").then(function (resp){
        const data = resp.data;

        console.log(data)
        category.value = data.map((item: {id: number, name: string}) => ({
            value: item.id ,
            label: item.name
        }));
    })
}


const data = ref();
export default defineComponent({
    name: 'HomeView',
    // components: {
    //   HelloWorld,
    // },
    setup() {
        const pagination = ref({
        current: 1,
        pageSize:5,
        total: 0
    });

        const router =useRouter();

        const updateBook=(book:any) => {
            router.push({
                path:'/updateBook',
                query:{data:JSON.stringify(book)}
            })
        }
        const handleTableChange = (pagination:any) =>{
            queryBookList({
                page:pagination.current,
                size:pagination.pageSize
            });
        };
        const query = () =>{
            queryBookList({
                page:1,
                size:pagination.value.pageSize});
        };
        onMounted(()=>{
            queryBookList({
                page:1,
                size:pagination.value.pageSize
            });
            queryBookCategoryList();
        });

        const queryBookList = (params:any)=> {
            axios.get("http://localhost:8088/getBookList",
                {
                params:{
                    page:params.page,
                    size:params.size,
                    id:categoryId.value
                }}).then(function (resp) {
                console.log(resp);
                data.value = resp.data.list;
                pagination.value.current = params.page;
                pagination.value.total=resp.data.total;
            })
            // const book = ref();
            // onMounted(()=>{
            //     axios.get("http://localhost:8088/getBookList").then(function (resp){
            //         console.log(resp);
            //         data.value=resp.data;
            //     })
            // })book
        };
        const covering = (index:number) =>{
            return String(index).padStart(2,'0');
        };
        return {
            data,
            columns,
            category,
            categoryId,
            query,
            pagination,
            handleTableChange,
            updateBook,
            covering,
        };
    },
});

</script>
